<template>
    <a-tag color="success" v-if="status=='success'">
        <template #icon>
            <check-circle-outlined />
        </template>
        {{text}}
    </a-tag>
    <a-tag color="processing" v-else-if="status=='processing'">
        <template #icon>
            <sync-outlined :spin="true" />
        </template>
        {{text}}
    </a-tag>
    <a-tag color="error" v-else-if="status=='error'">
        <template #icon>
            <close-circle-outlined />
        </template>
        {{text}}
    </a-tag>
    <a-tag color="warning" v-else-if="status=='warning'">
        <template #icon>
            <exclamation-circle-outlined />
        </template>
        {{text}}
    </a-tag>
    <a-tag color="default" v-else-if="status=='waiting'">
        <template #icon>
            <clock-circle-outlined />
        </template>
        {{text}}
    </a-tag>
    <a-tag color="default" v-else-if="status=='stop'">
        <template #icon>
            <minus-circle-outlined />
        </template>
        {{text}}
    </a-tag>
    <a-tag v-else>{{text}}</a-tag>
</template>

<script>
import {
    CheckCircleOutlined,
    SyncOutlined,
    CloseCircleOutlined,
    ExclamationCircleOutlined,
    ClockCircleOutlined,
    MinusCircleOutlined,
} from '@ant-design/icons-vue';

export default {
    name: 'StatusTag',
    props: {
        status: String,
        text: String
    },
    components: {
        CheckCircleOutlined,
        SyncOutlined,
        CloseCircleOutlined,
        ExclamationCircleOutlined,
        ClockCircleOutlined,
        MinusCircleOutlined,
    }
}
</script>

<style scoped>

</style>
